<template>
	<div>cssTestTwo</div>
	
	<input />

	<div>CSS 的 gap 属性是一个简写属性，分为 row-gap 和 column-gap </div>
	<div class="flexbox">
		<div v-for="item in 4" class="itemMain">实现多列两端对齐</div>
	</div>

	<div>backdrop-filter 正是为了给元素后的内容添加滤镜而不影响元素本身而诞生的。使用它可以非常方便的实现磨砂玻璃效果(毛玻璃)</div>
	<div class="backOne">
		<div>Normal</div>
		<div class="g-filter">filter</div>
		<div class="g-backdrop-filter">backdrop-filter</div>
	</div>

	<div>对于不兼容 backdrop-filter 的浏览器，如果它只是简单背景，可以使用 background-attachment: fixed 配合 filter: blur() 进行模拟</div>
	<div class="back-two">
		<div class="g-glossy">frosted glass effect </div>
	</div>
	<div>对于不兼容的上述 3 种效果的其他浏览器，设置了毛玻璃效果的元素，可以通过设置类似 background: rgba(255, 255, 255, 0.5)
		的样式，使之回退到半透明效果，也算一种非常合理的降级效果，不会引起 Bug</div>
	<div id="bg" class="g-normal">
		<p>Content</p>
	</div>

</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	export default {
		data() {
			return {}
		},
		mounted() {},

	}
</script>

<style scoped="scoped">
	/* Flexbox布局 */
	.flexbox {
		display: flex;
		gap: 28px;
		padding: 10px;
		outline: rgb(255, 0, 0) solid 1px;
		flex-direction: row;
		flex-wrap: wrap;
		/* align-items: baseline; */
		justify-content: space-between;
	}

	.itemMain {
		width: 100px;
		height: 50px;
		outline: 1px solid #f00;
	}

	.backOne {
		width: 100wh;
		height: 200px;
		background: url(../../public/favicon.ico);
		/* background-color: rgba(255, 110, 0, .5); */
		/* outline: 1px solid #00f; */
		padding-top: 10px;

	}

	.backOne>div {
		float: left;
		width: 100px;
		height: 100px;
		color: #0396FF;
		background: rgba(255, 255, 255, .5);
	}

	.g-filter {
		filter: blur(6px);
	}

	.g-backdrop-filter {
		backdrop-filter: blur(6px);
	}

	.back-two {
		display: inline-block;
		/* width: 100%; */
		height: 200px;
		background: url(../../public/favicon.ico);
		/* background-color: rgba(255, 110, 0, .5); */
		outline: 1px solid #00f;
		/* padding-top: 10px; */
		/* margin-top: 30px; */
		background-repeat: no-repeat;
		/* background-attachment: fixed; */
		/* background-size: contain; */
		background-size: 50% auto,contain;
	}

	.g-glossy {
		position: relative;
		width: 200px;
		height: 100px;
		background-color: rgba(255, 255, 255, 0.5);
		overflow: hidden;
		z-index: 10;
	}

	.g-glossy::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url(../../public/favicon.ico);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: contain;
		filter: blur(6px);
		z-index: -1;
	}


	.g-normal {
		position: relative;
		/* margin: auto; */
		width: 200px;
		height: 200px;
		animation: change 5s infinite alternate; 
		background: linear-gradient(deeppink, yellowgreen);
	}

	p {
		/* display: inline-block; */
		/* width: 100%; */
		animation: move 5s infinite alternate;
		/* 		text-align: left;
		align-content: space-between; */
		float: left;
		/* outline: 1px solid #00f; */
	}

	@keyframes change {
		0% {
			filter: hue-rotate(0);
		}

		100% {
			filter: hue-rotate(360deg);
		}
	}

	@keyframes move {
		0% {
			transform: translate(0px, 0);
		}

		100% {
			transform: translate(140px, 150px);
		}
	}
</style>
